<template>
    <view class="caterDetails">
        <uv-navbar
            :title="title"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
        ></uv-navbar>
        <view class="caterDetails-img">
            <image :src="BaseUrl + getinfo.image"></image>
        </view>
        <view class="caterDetails-information">
            <view
                class="caterDetails-cart"
                :style="{
                    borderBottom: pid == 14 ? '1rpx solid #b8b5b5' : 'none',
                }"
            >
                <view class="caterDetails-text">
                    <view class="caterDetails-title">{{ getinfo.title }}</view>
                    <view @click="collectionz">
                        <image
                            v-if="!getinfo.follow"
                            class="collection"
                            :src="BaseUrl + '/static/catering/nocollection.png'"
                            mode="scaleToFill"
                        />
                        <image
                            v-else
                            class="collection"
                            :src="BaseUrl + '/static/catering/collection.png'"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
                <view class="caterDetails-num">
                    <view class="caterDetails-prices">
                        <view class="caterDetails-price"
                            >¥ {{ getinfo.price }}</view
                        >
                        <view class="caterDetails-price-vip"
                            >会员价:¥{{ getinfo.sku[0].vip_price }}</view
                        >
                    </view>
                    <text class="caterDetails-num-text"
                        >购物获得积分{{ getinfo.sku[0].send_score }}</text
                    >
                </view>
            </view>
            <view class="caterDetail-text" v-if="pid == 14">
                <view class="caterDetail-text-title">
                    <uv-parse :content="getinfo.content"></uv-parse>
                </view>
                <view class="caterDetail-text-num"
                    >已售出{{ getinfo.sales }}</view
                >
            </view>
            <view class="caterDetail-button" v-if="pid == 14">
                <view class="caterDetail-button-left">
                    <image
                        :src="BaseUrl + getinfo.shop.avatar"
                        mode="scaleToFill"
                    />
                    <view class="caterDetail-button-text">{{
                        getinfo.shop.shopname
                    }}</view>
                </view>

                <view
                    class="caterDetail-button-right"
                    @click="call(getinfo.shop.mobile)"
                >
                    <image
                        :src="BaseUrl + '/static/catering/mobile.png'"
                        mode="scaleToFill"
                    />
                    <view class="caterDetail-button-text">一键拨打</view>
                </view>
            </view>
        </view>
        <view class="caterDetail-line">
            <view
                style="width: 30rpx; height: 1rpx; background-color: #ccc"
            ></view>
            <view>商品介绍</view>
            <view
                style="width: 30rpx; height: 1rpx; background-color: #ccc"
            ></view>
        </view>
        <view class="caterDetail-imgs">
            <view style="width: 94%; margin: 0 3%; padding: 30rpx 0">
                <img
                    v-for="i in img"
                    :key="i"
                    :src="BaseUrl + i"
                    mode="widthFix"
                    style="width: 88vw; margin-top: 10rpx"
                    alt=""
                />
            </view>
        </view>
        <view class="caterDetail-btns">
            <button class="caterDetail-btn" v-if="false" @click="addCart">
                加入购物车
            </button>
            <button
                class="caterDetail-btn"
                style="background: linear-gradient(to right, #00a579, #057849)"
                @click="buynow"
            >
                立即购买
            </button>
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            loge: 0,
            getinfo: {},
            img: [],
            // 商家信息
            shopInfoed: {},
            id: "",
            title: "",
            pid: "",
            data: {},
            mobile: "",
        };
    },
    onLoad(e) {
        this.mobile = e.mobile;
        this.id = e.id;
        this.pid = e.pid;
        this.shopDetails(e.id);
        this.shopInfo();
    },
    methods: {
        // 收藏商品

        async collectionz() {
            await this.$request
                .post("/api/wanlshop.product/follow", {
                    id: this.getinfo.id,
                })
                .then((res) => {
                    if (res.data.data) {
                        uni.showToast({
                            title: "收藏成功",
                            icon: "none",
                            duration: 2000,
                        });
                        this.shopDetails(this.id);
                    } else {
                        uni.showToast({
                            title: "取消收藏",
                            icon: "none",
                            duration: 2000,
                        });
                        this.shopDetails(this.id);
                    }
                });
        },

        // 拨打商家电话
        call(mobile) {
            uni.makePhoneCall({
                phoneNumber: String(mobile), //仅为示例
                success: function (e) {},
                fail: function (e) {},
            });
        },
        leftClick() {
            uni.navigateBack();
        },
        // 商品详情
        async shopDetails(id) {
            await this.$request
                .get("api/wanlshop.product/goods", {
                    id: id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.getinfo = res.data;
                        this.img = res.data.images;
                        if (this.pid == 11) {
                            this.title = "旅游住宿";
                        } else if (this.pid == 14) {
                            this.title = "景区门票";
                        }
                    } else {
                        uni.showToast({
                            titlr: res.mas,
                            icon: "none",
                        });
                    }
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                    setTimeout(() => {
                        uni.reLaunch({
                            url: "/pages/tabBar/home/home",
                        });
                    }, 1000);
                });
        },

        // },
        // 商家信息
        async shopInfo() {
            await this.$request
                .post("api/wanlshop.merchant/shop_details", {})
                .then((res) => {
                    this.shopInfoed = res.data;
                });
        },

        // 立即购买
        async buynow() {
            if (!uni.getStorageSync("address")) {
                uni.showToast({
                    title: "请添加收货地址",
                    icon: "none",
                    duration: 2000,
                });
                setTimeout(() => {
                    uni.navigateTo({
                        url: "/liu/pages/address",
                    });
                }, 2000);
                return;
            }
            let data = {
                goods_id: this.getinfo.sku
                    ? this.getinfo.sku[0].goods_id
                    : this.getinfo.id,
                price: this.getinfo.sku[0].price,
                shop_id: this.getinfo.shop_id,
                shop_category_id: this.getinfo.shop_category_id,
                sku_id: this.getinfo.sku[0].id,
                goods_id: this.getinfo.sku[0].goods_id,
                num: 1,
            };
            uni.setStorageSync("datas", data);
            if (this.pid == 14) {
                uni.navigateTo({
                    url: `/dabai/pages/Purchase/Purchase?goods_id=${this.id}&sku_id=${this.getinfo.sku[0].id}`,
                });
            } else if (this.pid == 11) {
                uni.navigateTo({
                    url: `/dabai/pages/appointment/appointment?goods_id=${this.id}&sku_id=${this.getinfo.sku[0].id}`,
                });
            } else {
                uni.setStorageSync("data", data);
                data = JSON.stringify(data);
                uni.navigateTo({
                    url: `/liu/pages/confirmOrder?data=${data}&goods_id=${this.id}`,
                });
            }
        },
        // 加入购物车
        async addCart() {
            this.$request
                .post("api/wanlshop.cart/storage", {
                    data: {
                        goods_id: this.getinfo.sku[0].goods_id,
                        image: this.getinfo.image,
                        shop_id: this.getinfo.shop_id,
                        shop_name: this.getinfo.shop_name,
                        sku_id: this.getinfo.sku[0].id,
                        sum: this.getinfo.sku[0].price,
                        title: this.getinfo.title,
                        sku: this.getinfo.sku[0],
                        number: 1,
                    },
                    type: "add",
                })
                .then((res) => {
                    uni.showToast({
                        title: "加入购物车成功",
                        icon: "none",
                        duration: 2000,
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.caterDetails {
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    padding-bottom: 130rpx;
    background: linear-gradient(
        to bottom,
        #d3f1de 0%,
        #f4f6f5 30%,
        #f6f6f6 100%
    );
    // position: relative;

    .caterDetails-img {
        width: 100vw;
        height: 560rpx;
        margin-top: 170rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .caterDetails-information {
        width: 94vw;
        margin: 0 3vw;
        // min-height: 480rpx;
        height: auto;
        border-radius: 30rpx;
        position: relative;
        top: -30rpx;
        background-color: #fff;

        .caterDetails-cart {
            width: 100%;
            overflow: hidden;
            // border-bottom: 1rpx solid #b8b5b5;
            padding: 50rpx 30rpx 20rpx;

            .caterDetails-text {
                font-size: 28rpx;
                color: #121212;
                line-height: 36rpx;
                // position: relative;

                .caterDetails-title {
                    font-family: Source Han Sans CN;
                    font-weight: bold;
                    font-size: 38rpx;
                    color: #121212;
                    line-height: 1.2;
                }

                .collection {
                    width: 100rpx;
                    height: 100rpx;
                    position: absolute;
                    top: -60rpx;
                    right: 0rpx;
                }
            }

            .caterDetails-num {
                // border: 2px solid red;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 30rpx 0;

                .caterDetails-prices {
                    // width: 70%;
                    display: flex;

                    .caterDetails-price {
                        // width: 200rpx;
                        color: #eb5c20;
                        font-size: 30rpx;
                        padding: 0 20rpx 0 0;
                    }

                    .caterDetails-price-vip {
                        // border: 1px solid #000;
                        color: #eb5c20;
                        font-size: 22rpx;
                        padding: 0 20rpx;
                        border-left: 1rpx solid #eb5c20;
                        height: 20rpx;
                        margin-top: 6rpx;
                    }
                }

                .caterDetails-num-text {
                    color: #999999;
                    font-size: 22rpx;
                }
            }
        }

        .caterDetail-text {
            width: 100%;
            overflow: hidden;
            padding: 20rpx 30rpx 20rpx;
            font-size: 28rpx;
            color: #121212;
            line-height: 1.2;
            border-bottom: 1rpx solid #b8b5b5;

            .caterDetail-text-title {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 28rpx;
                color: #666666;
                // height: 90rpx;
            }

            .caterDetail-text-num {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 26rpx;
                color: #999999;
                line-height: 36rpx;
                margin: 20rpx 0 0rpx 0;
            }
        }

        .caterDetail-button {
            width: 100%;
            overflow: hidden;
            display: flex;
            // border: 1px solid red;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 30rpx 20rpx;
            // height: 80rpx;

            .caterDetail-button-left {
                width: 60%;
                display: flex;
                align-items: center;
                height: 80rpx;

                image {
                    width: 72rpx;
                    height: 72rpx;
                    margin-right: 20rpx;
                    border-radius: 50%;
                }

                .caterDetail-button-text {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #121212;
                }
            }

            .caterDetail-button-right {
                width: 30%;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 180rpx;
                height: 68rpx;
                border: 1rpx solid #057b4d;
                border-radius: 34rpx;

                image {
                    width: 36rpx;
                    height: 36rpx;
                }

                .caterDetail-button-text {
                    font-family: Source Han Sans CN;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #057b4d;
                    margin-left: 10rpx;
                }
            }
        }
    }

    .caterDetail-line {
        width: 26vw;
        height: 84rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-bottom: 20rpx;
        // padding: 510rpx 0 20rpx;
    }

    .caterDetail-imgs {
        width: 94vw;
        margin: 0 3vw;
        overflow: hidden;
        background-color: #fff;
        border-radius: 30rpx;

        .caterDetail-imgs-img {
            width: 94%;
            margin: 0 3%;
            // padding: 30rpx 0;
        }
    }

    .caterDetail-btns {
        width: 100vw;
        height: 120rpx;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(249, 247, 247, 0.3);
        border-radius: 30rpx 30rpx 0 0;

        .caterDetail-btn {
            width: 80%;
            height: 92rpx;
            line-height: 92rpx;
            border-radius: 40rpx;
            background-color: #2c2c2c;
            color: #fff;
        }
    }
}
</style>
